<template>
  <div class="dashboard-container">
    <div class="filter-container">
      <el-row :gutter="10" style="width:100%">
        <el-col :span="4">
          <el-input
            v-model="listQuery.waybill_no"
            placeholder="运单号"
            class="input-with-select"
            @keypress.enter.native="reloadList"
          />
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="listQuery.trade_code"
            placeholder="提单号"
            class="input-with-select"
            @keypress.enter.native="reloadList"
          />
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="listQuery.status"
            clearable
            placeholder="选择状态"
            @change="reloadList"
          >
            <el-option label="已调整" :value="1" />
            <el-option label="待调整" :value="0" />
          </el-select>
        </el-col>

        <el-col :span="4">
          <el-select
            v-model="listQuery.uid"
            clearable
            filterable
            placeholder="选择账户"
            @change="reloadList"
          >
            <el-option v-for="(item, index) in memberList" :key="index" :label="item.username" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="listQuery.type"
            clearable
            filterable
            placeholder="调整类型"
            @change="reloadList"
          >
            <el-option v-for="(item, index) in AdjustTypeList" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-date-picker
            v-model="listQuery.created"
            style="width: 100%;"
            type="datetimerange"
            range-separator="~"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          />
        </el-col>

      </el-row>
      <el-row style="margin-top:10px">
        <div style="display:flex">
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="reloadList"
          >搜索</el-button>
          <el-button
            class="filter-item"
            type="primary"
            style="margin-left: 10px;"
            icon="el-icon-document-add"
            @click="addNews"
          >
            添加
          </el-button>
          <el-button
            class="filter-item"
            type="primary"

            style="margin-left: 10px;"
            icon="el-icon-edit"
            @click="fqorderAll"
          >
            批量调整
          </el-button>
          <download-excel
            style="margin-left:10px"
            class="export-excel-wrapper"
            :fetch="importPackageList"
            :fields="json_fields"
            type="xls"
            worksheet="My Worksheet"
            name="账单调整"
            :before-generate="startDownload"
            :before-finish="finishDownload"
          >
            <el-button type="primary">导 出</el-button>
          </download-excel>
        </div>

      </el-row>

    </div>
    <div style="padding:0 20px">

      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        height="calc(100vh - 250px)"
        style="width: 100%;"
        size="mini"
        border
        tooltip-effect="dark"
        :header-cell-style="{ background: '#eaf1fd', color: '#333' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column :selectable="selectable" type="selection" align="center" fixed />

        <el-table-column
          label="运单号"
          width="150px"
          prop="waybill_no"
        />
        <el-table-column
          label="提单号"
          min-width="150px"
          prop="order.trade_code"
        />
        <el-table-column
          label="用户昵称"
          min-width="150px"
          prop="user.username"
        />
        <el-table-column label="结算账户" prop="tid" width="150">
          <template #default="{ row }">
            <div>
              <span>+{{ row.user.area_code }} {{ row.user.mobile }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="调整金额"
          width="150px"
          prop="adjust_amount"
        />
        <el-table-column
          label="调整类型"
          width="150px"
          prop="type.name"
        />
        <el-table-column
          label="提交人"
          width="150px"
          prop="admin_create.username"
        />
        <el-table-column
          label="审核人"
          width="150px"
          prop="admin_confirm.username"
        />
        <el-table-column
          label="备注"
          width="350px"
          prop="remark"
        />
        <el-table-column label="状态" prop="tid" width="100">
          <template #default="{ row }">
            <div>
              <span v-if="row.status == 1" style="color: #409EFF;">已调整</span>
              <span v-else style="color: orange;">待调整</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="created" width="150" />
        <el-table-column fixed="right" label="操作" prop="addtime" width="200">
          <template #default="{ row }">
            <el-button :disabled="row.status == 1" type="primary" @click="fqorder(row)">调 整</el-button>
            <el-button :disabled="row.status == 1" type="danger" @click="delet(row)">废 弃</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </div>
    <Detial :detial="detial" :status="status" :adjust-type-list="AdjustTypeList" :member-list="memberList" :visible="visible" @update="closeDraw" @reload="reloadList" />
  </div>
</template>

<script>
import { listAdjust, listAdjustType, adjustAmountConfirmBatch, deleteAdjust } from '@/api/finance/index'
import { listUser } from '@/api/user/index'

import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import Detial from './components/billDetial.vue'
import _ from 'lodash'
export default {
  name: 'Dashboard',
  components: {
    Pagination,
    Detial
  },
  data() {
    return {
      data_arr: [],
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        waybill_no: '',
        trade_code: '',
        status: '',
        uid: '',
        created: [],
        type: ''
      },
      visible: false,
      status: 1,
      id: '',
      detial: {},
      message: '',
      memberList: [],
      AdjustTypeList: [],
      selectList: [],
      json_fields: {
        运单号: {
          field: 'waybill_no',
          callback: value => {
            return '&nbsp;' + value
          }
        },
        提单号: {
          field: 'order.trade_code',
          callback: value => {
            return '&nbsp;' + value
          }
        },
        用户昵称: 'user.username',
        结算账户: 'mobile',
        调整金额: 'adjust_amount',
        调整类型: 'type.name',
        提交人: {
          field: 'admin_create.username',
          callback: value => {
            return '&nbsp;' + value
          }
        },
        审核人: {
          field: 'admin_confirm.username',
          callback: value => {
            return '&nbsp;' + value
          }
        },
        备注: 'remark',
        状态: {
          field: 'status',
          // 自定义回调函数
          callback: value => {
            if (value === 1) return '已调整'
            if (value === 0) return '待调整'
          }
        },
        创建时间: 'created'
      }

    }
  },
  computed: {
  },
  created() {
    this.getList()
    this.getMemberList()
    this.getlistAdjustType()
  },
  methods: {
    handleSelectionChange(val) {
      this.selectList = val
    },
    getlistAdjustType() {
      listAdjustType({
        limit: 99999,
        status: 1
      }).then(res => {
        this.AdjustTypeList = res.data.list
      })
    },
    getMemberList() {
      listUser({
        status: 1,
        limit: 9999999
      }).then(res => {
        this.memberList = res.data.data
      })
    },
    closeDraw() {
      this.visible = false
    },
    addNews() {
      this.status = 1
      this.visible = true
    },
    edit(row) {
      this.detial = { ...row }
      this.status = 2
      this.visible = true
    },
    delet(row) {
      this.$confirm('确认废弃该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAdjust({
          ids: [row.id]
        }).then(res => {
          this.$message({
            type: 'success',
            message: '废弃成功!'
          })
          this.getList()
        })
      }).catch(() => {

      })
    },
    reloadList() {
      this.listQuery.page = 1
      this.visible = false
      this.getList()
    },
    getList() {
      this.listLoading = true
      listAdjust(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    selectable(row, index) {
      if (row.status === 1) {
        return false
      } else {
        return true
      }
    },
    // 调整
    fqorder(row) {
      this.$confirm('确定调整?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        adjustAmountConfirmBatch({
          ids: [row.id]
        }).then(res => {
          this.$message.success(res.msg)
          this.getList()
        })
      }).catch(() => {
      })
    },
    // 批量调整
    fqorderAll() {
      if (!this.selectList.length) {
        this.$message.error('请选择数据')
        return
      }
      const ids = this.selectList.map(item => {
        return item.id
      })
      this.$confirm('确定调整?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        adjustAmountConfirmBatch({
          ids: ids
        }).then(res => {
          this.$message.success(res.msg)
          this.getList()
        })
      }).catch(() => {
      })
    },

    // 导出
    getPageSize() {
      return new Promise((resolve, reject) => {
        listAdjust(this.listQuery).then(response => {
          resolve(response.data.total)
        })
      })
    },
    getExcelList(page) {
      const param = _.cloneDeep(this.listQuery)
      param.page = page
      return new Promise((resolve, reject) => {
        listAdjust(param).then(response => {
          response.data.list.forEach(item => {
            item.mobile = '+' + _.get(item.user, 'area_code', '') + ' ' + _.get(item.user, 'mobile', '')
          })
          resolve(response.data.list)
        })
      })
    },
    async importPackageList() {
      const total = await this.getPageSize()
      const page = Math.ceil(total / this.listQuery.limit)
      var data = []
      for (let i = 1; i <= page; ++i) {
        data = data.concat(await this.getExcelList(i))
      }
      return data
    },
    startDownload() {
      this.loadingExcel = this.$loading({
        lock: true,
        text: '导出表格中，请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    finishDownload() {
      this.loadingExcel.close()
    }
  }
}
</script>
<style scoped>
.filter-container{
  padding:20px 20px 10px;
}

.upload-demo{
  margin: 20px 0 10px;
}
</style>
